<template>
  <div class="todo-item" :class="{ completed }">
    <div class="todo-content">
      <input 
        type="checkbox" 
        :checked="completed"
        @change="toggleCompletion"
      >
      <span class="todo-title">{{ title }}</span>
      <button @click="removeTodo" class="remove-btn">×</button> <!-- Move the remove button to the right -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'TodoItem',
  props: {
    title: {
      type: String,
      required: true
    },
    completed: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toggleCompletion() {
      this.$emit('update:completed', !this.completed)
    },
    removeTodo() {
      this.$emit('remove-todo')
    }
  }
}
</script>

<style scoped>
.todo-item.completed .todo-title {
  text-decoration: line-through;
}
.todo-content {
  display: flex;
  align-items: center;
}
.remove-btn {
  margin-left: auto; /* Move the remove button to the right */
}
</style>